<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>首页</h1>
    <input @click="testAjax()" type="button" value="按钮"><br><br>
    <input @click="testRequestBody()" type="button" value="按钮2"><br><br>
    <a th:href="@{/test/Response}">Response</a> <br><br>

    <input @click="testResponseBody()" type="button" value="按钮3"><br><br>
    <a th:href="@{/test/down}">文件下载</a> <br><br>
    <form th:action="@{/test/up}" method="post" enctype="multipart/form-data">
        头像：<input type="file" name="photo"><br>
        <input type="submit" value="提交">
    </form>

</div>

<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">

    new Vue({
        el: "#app",
        methods: {
            testAjax() {
                axios.post(
                    "/test/ajax?id=1001",
                    {
                        username: "admin", password: "123456"
                    }
                ).then(response => {     console.log(response.data)

                })
            },
            testRequestBody() {
                axios.post(
                    "/test/RequestBody/json",
                    {username: "root", password: "123456", age: 23, gender: "男"}
                ).then(response => {
                    console.log(response.data)
                });
            },
            testResponseBody() {
                axios.post(
                    "test/responseBody/json"
                ).then(response => {
                    console.log(response.data)
                })
            }
        }
    })
</script>
</body>
</html>